<script lang="ts" setup>
import { Setting } from '@element-plus/icons-vue'
import PieChart from './components/pie-chart.vue'
import BarChart from './components/bar-chart.vue'
import LineChart from './components/line-chart.vue'
import type { Data } from './type'
import { cloneDeep, sortBy } from 'lodash-es'

const typeKey = ref('')
const applicationModelId = ref()
const loading = ref(false)

const applicationModelList = ref<{
  id: number
  name: string
}[]>([])

const data = shallowRef<Data>({
  rowList: [],
  list: [],
})

const pieData = computed(() => {
  const d = unref(data)
  return d.list.map((item) => {
    return {
      name: item.name,
      value: item.totalNum,
    }
  })
})
const barData = computed(() => {
  const d = cloneDeep(unref(pieData))
  return sortBy(d, 'value').reverse().slice(0, 5).reverse()
})
const lineData = computed(() => {
  const d = unref(data)
  return {
    x: d.rowList,
    y: d.list.map((item) => {
      return {
        name: item.name,
        value: item.listData,
      }
    }),
  }
})

async function getApplicationModelList() {
  const res = await applicationModelApi.loadApplicationModelList()
  applicationModelList.value = res.data
}

async function getMode() {
  if (unref(typeKey)) {
    const res = await equipmentAnalysisApi.getMode(unref(typeKey))
    applicationModelId.value = res.data
  }
}

async function saveMode() {
  if (unref(applicationModelId) && unref(typeKey)) {
    await equipmentAnalysisApi.saveMode(
      unref(typeKey),
      unref(applicationModelId),
    )
    await getData()
  }
}

async function getData() {
  const res = await equipmentAnalysisApi.getEquipmentAnalysisData(
    unref(typeKey),
  )
  try {
    if (res.data.list === null) {
      ElMessage.warning('该设备类型未绑定应用模型')
      res.data.list = []
    }
  }
  catch (error) {
  }
  data.value = res.data
}

watch(typeKey, async () => {
  await getMode()
  await getData()
})

onMounted(() => {
  getApplicationModelList()
})
</script>

<template>
  <div v-loading="loading" element-loading-custom-class="global-loading" class="h-full w-full flex flex-col p-4">
    <div class="relative flex flex-shrink-0 items-center justify-center">
      <DictionaryPicker v-model="typeKey" option-class="text-center" :clearable="false" size="large" class="text-center !w-80" default-first-item code="SHE_BEI_LEI_XING" />
      <ElPopover placement="bottom" trigger="hover" :width="300">
        <template #reference>
          <div class="absolute right-4 top-1/2 cursor-pointer opacity-80 transition-all -translate-y-1/2 hover:opacity-100">
            <ElIcon :size="24">
              <Setting />
            </ElIcon>
          </div>
        </template>
        <div class="fs-18 py-1">
          数据设置
        </div>
        <ElForm class="mt-3 px-3">
          <ElFormItem label="应用模型">
            <ElSelect v-model="applicationModelId" filterable :teleported="false" placeholder="请选择" @change="saveMode">
              <ElOption v-for="item in applicationModelList" :key="item.id" :label="item.name" :value="item.id" />
            </ElSelect>
          </ElFormItem>
        </ElForm>
        <div v-if="false" class="flex items-center justify-end">
          <ElButton type="success">
            保存
          </ElButton>
        </div>
      </ElPopover>
    </div>
    <div class="mt-4 h-90 flex items-center">
      <div class="alpha-block h-full w-[calc(50%-0.5rem)]">
        <PieChart :data="pieData" />
      </div>
      <div class="alpha-block ml-4 h-full w-[calc(50%-0.5rem)]">
        <BarChart :data="barData" />
      </div>
    </div>
    <div class="alpha-block mt-4 flex-auto overflow-auto">
      <LineChart :data="lineData" />
    </div>
  </div>
</template>

<style>
.text-center .el-select__wrapper {
  text-align: center !important;
}
</style>
